Ext.define('appfe.view.main.Main', {
    extend: 'Ext.container.Viewport',

    requires: [
        'appfe.ux.field.DateTime',
        'appfe.ux.picker.DateTime',
        'appfe.ux.UXStatusBar',
        'Ext.button.Segmented',
        'Ext.list.Tree',
        'Ext.form.CheckboxGroup',
        'Ext.ux.layout.ResponsiveColumn'
    ],

    controller: 'main',
    viewModel: 'main',

    cls: 'sencha-dash-viewport',
    itemId: 'mainView',

    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    listeners: {
        render: 'onMainViewRender'
    },

    items: [
        {
            xtype: 'toolbar',
            cls: 'sencha-dash-dash-headerbar header-shadow',
            height: 64,
            itemId: 'headerBar',
            items: [
                {
                    xtype: 'component',
                    reference: 'senchaLogo',
                    cls: 'sencha-logo',
                    html: '<div class="main-logo"><img style="width: 26px; height: 26px;" src="resources/images/daling-logo.png">精商股票分析系统</div>',
                    width: 250
                },
                {
                    margin: '0 0 0 8',
                    ui: 'header',
                    iconCls: 'x-fa fa-navicon softblue-fontawesome-icon',
                    id: 'main-navigation-btn',
                    handler: 'onToggleNavigationSize'
                },
                {
                    xtype: 'uxstatusbar',
                    id: 'msg-statusbar',
                    region: 'north'
                },
                '->',
                {
                    xtype: 'segmentedbutton',
                    margin: '0 8 0 0',
                    platformConfig: {
                        ie9m: {
                            hidden: true
                        }
                    },

                    items: [{
                        iconCls: 'x-fa fa-desktop softblue-fontawesome-icon',
                        pressed: true
                    }, {
                        iconCls: 'x-fa fa-tablet softblue-fontawesome-icon',
                        handler: 'onSwitchToModern',
                        tooltip: 'Switch to modern toolkit'
                    }]
                },
                // {
                //     iconCls: 'x-fa fa-search',
                //     ui: 'soft-red',
                //     href: '#searchresults',
                //     hrefTarget: '_self',
                //     tooltip: 'See latest search'
                // },
                // {
                //     iconCls: 'x-fa fa-envelope',
                //     ui: 'green',
                //     href: '#email',
                //     hrefTarget: '_self',
                //     tooltip: 'Check your email'
                // },
                // {
                //     iconCls: 'x-fa fa-question',
                //     ui: 'soft-purple',
                //     href: '#faq',
                //     hrefTarget: '_self',
                //     tooltip: 'Help / FAQ\'s'
                // },
                // {
                //     iconCls:'x-fa fa-th-large',
                //     ui: 'header',
                //     href: '#profile',
                //     hrefTarget: '_self',
                //     tooltip: 'See your profile'
                // },             
                // {
                //     xtype: 'image',
                //     cls: 'header-right-profile-image',
                //     height: 35,
                //     width: 35,
                //     alt:'current user image',
                //     src: 'resources/images/user-profile/2.png'
                // },
                "-", { //系统消息
                    xtype: 'buttontransparent',
                    text: '消息<font color=#ff0000>(5)</font>',
                    iconCls: 'x-fa fa-bell softblue-fontawesome-icon',
                    handler: 'fireNotification'
                },
                "-", { //用户名
                    xtype: 'buttontransparent',
                    bind: {
                        text: '{user.displayname}'
                    },
                    //handler: 'onClickUserBtn',//可以增减弹窗查看用户详情的事件或者修改用户自己昵称, 密码等属性的窗口
                    iconCls: 'x-fa fa-user softblue-fontawesome-icon',
                    disabled: true
                },
                "-", {
                    xtype: 'buttontransparent',
                    text: '注销',
                    handler: 'onClickLogoutBtn',
                    iconCls: 'x-fa fa-sign-out softblue-fontawesome-icon'
                }
            ]
        },
        {
            xtype: 'maincontainerwrap',
            id: 'main-view-detail-wrap',
            reference: 'mainContainerWrap',
            flex: 1,
            items: [
                {
                    xtype: 'treelist',//组件官方文档(本地的有残缺) https://docs.sencha.com/extjs/6.2.0/modern/Ext.list.Tree.html, https://docs.sencha.com/extjs/6.2.0/classic/Ext.list.TreeItem.html
                    reference: 'navigationTreeList',
                    itemId: 'navigationTreeList',
                    ui: 'navigation',
                    store: 'NavigationTree',
                    width: 250,
                    expanderFirst: false,
                    expanderOnly: false,
                    listeners: {
                        selectionchange: 'onNavigationTreeSelectionChange'
                    }
                },
                {
                    xtype: 'container',
                    flex: 1,
                    id: 'main-card-panel',
                    reference: 'mainCardPanel',
                    cls: 'sencha-dash-right-main-container',
                    itemId: 'contentPanel',
                    layout: {
                        type: 'card',
                        anchor: '100%'
                    }
                }
            ]
        }
    ],
    listeners: {
        render: 'onMainViewRender',//render先执行
        afterrender: 'afterMainViewRender',
        boxready: 'onBoxReady'
    }
});
